<template>
  <h2>计算属性</h2>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <button @click="add">btn</button>

  <hr />

  <ul>
    <li v-for="item in oddArr" :key="item">{{ item }}</li>
  </ul>
</template>

<script setup>
import { ref, computed } from "vue";
const count = ref(1);
const add = () => {
  count.value++;
};
const doubleCount = computed(() => {
  return count.value * 2;
});

const arr = [1, 2, 3, 4, 5, 6, 7];
const oddArr = computed(() => {
  return arr.filter((item) => item % 2);
});
</script>

<!-- <script>
// 做计算属性要从vue里面结构computed
// computed是函数,里面传入回调函数
import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(1);
    const add = () => {
      count.value++;
    };
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    const arr = [1, 2, 3, 4, 5, 6, 7];
    const oddArr = computed(() => {
      return arr.filter((item) => item % 2);
    });

    // template上没用到的变量和方法不需要return
    return { count, add, doubleCount, oddArr };
  },
};
</script> -->
